<template>
	<div class="aside">
		<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<el-menu :default-openeds="['1', '3']">
				<el-submenu index="1">
					<template slot="title"><i class="el-icon-menu"></i>员工</template>

					<el-menu-item index="1-1" @click="toStaff()">员工列表</el-menu-item>
					<el-menu-item index="1-2" @click="toAsk()">员工请求列表</el-menu-item>
					<el-menu-item index="1-2" @click="toUserChange()">实习生转正</el-menu-item>
				</el-submenu>
				<el-submenu index="2">
					<template slot="title"><i class="el-icon-menu"></i>部门</template>
					<el-menu-item index="2-1" @click="toDepart()">部门列表</el-menu-item>
				</el-submenu>
				<el-submenu index="3">
					<template slot="title"><i class="el-icon-menu"></i>招聘</template>
					<el-menu-item index="3-1" @click="toMessage()">招聘信息</el-menu-item>
				</el-submenu>
				<el-submenu index="4">
					<template slot="title"><i class="el-icon-menu"></i>职位</template>
					<el-menu-item index="4-1" @click="toJob()">职位列表</el-menu-item>
				</el-submenu>
				<el-submenu index="5">
					<template slot="title"><i class="el-icon-menu"></i>操作记录</template>
					<el-menu-item index="5-1" @click="toRecord()">操作记录</el-menu-item>
				</el-submenu>
				<el-submenu index="6">
					<template slot="title"><i class="el-icon-menu"></i>薪资绩效</template>
					<el-menu-item index="6-1" @click="toSalary()">薪资列表</el-menu-item>
					<el-menu-item index="6-2" @click="toPerformance()">绩效列表</el-menu-item>
				</el-submenu>

			</el-menu>
		</el-aside>
	</div>

</template>

<script>
	export default {
		name: 'asideblock',

		props: {
			userid: '',
			username: ''
		},

		data() {
			return {

			}
		},

		methods: {
			toStaff() {
				this.$router.push({
					path: '/staff',
					query: {
						userid: this.userid,
						username: this.username,
					}
				})
			},
			toDepart() {
				this.$router.push({
					path: '/depart',
					query: {
						userid: this.userid,
						username: this.username,
					}
				})
			},
			toMessage() {
				this.$router.push({
					path: '/message',
					query: {
						userid: this.userid,
						username: this.username,
					}
				})
			},
			toSalary() {
				this.$router.push({
					path: '/salary',
					query: {
						userid: this.userid,
						username: this.username,
					}
				})
			},
			toPerformance() {
				this.$router.push({
					path: '/performance',
					query: {
						userid: this.userid,
						username: this.username,
					}
				})
			},
			toInformation() {
				this.$router.push({
					path: '/personalInformation',
					query: {
						userid: this.userid,
						username: this.username,
					}
				})
			},
			toJob() {
				this.$router.push({
					path: '/job',
					query: {
						userid: this.userid,
						username: this.username,
					}
				})
			},
			toUserChange() {
				this.$router.push({
					path: '/userchange',
					query: {
						userid: this.userid,
						username: this.username,
					}
				})
			},
			toAsk() {
				this.$router.push({
					path: '/ask',
					query: {
						userid: this.userid,
						username: this.username,
					}
				})
			},
			toRecord() {
				this.$router.push({
					path: '/record',
					query: {
						userid: this.userid,
						username: this.username,
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.aside {
		width: 20%;
		margin-top: 60px;
		margin-left: 5%;
		float: left;
		
	}
	.el-aside{
			border-radius: 10px;
		}
</style>